<div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white"></h4>
            </div>
            <div class="card-body">
                <form #rectiveForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit(rectiveForm)" novalidate>
                    <div class="form-body">
                        <h3 class="card-title">个人信息修改</h3>
                        <hr>
                        <div class="row p-t-20">
                            <div class="col-md-6 floating-labels">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm"
                                    [fieldModel]="formGroup.controls.name">
                                    <label for="name" opRequiredLabel>姓名：</label>
                                    <input type="text" class="form-control" id="name" formControlName="name">
                                    <span class="bar"></span>
                                    <op-single-error-message [formModel]="rectiveForm"
                                        [fieldModel]="formGroup.controls.name" labelTitle="姓名" formatDetails="汉字">
                                    </op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6 floating-labels">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm"
                                    [fieldModel]="formGroup.controls.idNumber">
                                    <label for="idNumber" opRequiredLabel>身份证号：</label>
                                    <input type="text" class="form-control" id="idNumber" formControlName="idNumber">
                                    <span class="bar"></span>
                                    <op-single-error-message [formModel]="rectiveForm"
                                        [fieldModel]="formGroup.controls.idNumber" labelTitle="身份证号"
                                        formatDetails="18位合法号码"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group" id="genderGroup">
                                    <br>
                                    <label for="genderGroup">性别：</label>
                                    <input name="group4" type="radio" id="male" class="radio-col-light-blue"
                                        name="gender" formControlName="gender" [value]="1">
                                    <label for="male">男</label>
                                    <input name="group4" type="radio" id="famale" class="radio-col-light-blue"
                                        name="gender" formControlName="gender" [value]="2">
                                    <label for="famale">女</label>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6 floating-labels">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm"
                                    [fieldModel]="formGroup.controls.telephone">
                                    <label for="telephone" opRequiredLabel>电话号码：</label>
                                    <input type="text" class="form-control" id="telephone" formControlName="telephone">
                                    <span class="bar"></span>
                                    <op-single-error-message [formModel]="rectiveForm"
                                        [fieldModel]="formGroup.controls.telephone" labelTitle="电话号码"
                                        formatDetails="11位合法号码"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <mat-form-field style="width:100%">
                                    <input matInput [matDatepicker]="picker" placeholder="生日" formControlName="birthday"
                                        (click)="picker.open()" (keydown)="picker.open()">
                                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                    <mat-datepicker #picker touchUi="true"></mat-datepicker>
                                </mat-form-field>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <mat-form-field style="width:100%">
                                        <mat-select name="province" placeholder="现居住地(省)："
                                            formControlName="firstAddress">
                                            <mat-option *ngFor="let item of firstAddress" [value]="item.code">
                                                {{item.description}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <mat-form-field style="width:100%">
                                        <mat-select name="address" placeholder="现居住地(市)："
                                            formControlName="secondAddress">
                                            <mat-option *ngFor="let item of secondAddress" [value]="item.code">
                                                {{item.description}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <mat-form-field style="width:100%">
                                        <mat-select name="nationality" placeholder="民族：" formControlName="nationality">
                                            <mat-option *ngFor="let item of nationality" [value]="item.code">
                                                {{item.description}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">

                                <div class="form-group">
                                    <mat-form-field style="width:100%">
                                        <mat-select name="status" placeholder="人生状态：" formControlName="status">
                                            <mat-option *ngFor="let item of status" [value]="item.code">
                                                {{item.description}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                    </div>
                    <br>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-check"></i> 修改
                        </button>
                        <button type="button" class="btn btn-inverse" data-toggle="modal" data-target="#myNewModal"
                            (click)="back(rectiveForm)">
                            <i class="fa fa-reply"></i> 返回</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<op-modal-dialog modalId="myNewModal" modalTitle="提示：" (confirm)="confirm()" (cancel)="cancel()">
    确定要返回吗？
</op-modal-dialog>